---
pagination:
  data: design.components.items
  size: 1
  addAllPagesToCollections: true
  alias: item
permalink: '{{ item.url }}/index.html'
pageScripts:
  - '/js/design-system.js'
---

{% from 'macros/design-system-component.njk' import designSystemComponent with context %}

{% set pageTitle = item.data.title ~ ' - Component' %}
{% extends "design-system.njk" %}

{% block inner %}
  
  {% if item.variants | length %}
  <nav class="cluster" aria-label="variants">
    {% for variant in item.variants %}
      <a href="#{{ variant.data.title | slug }}">{{ variant.data.title }}</a>
    {% endfor %}
  </nav>
  {% endif %}

  <div class="breakout pad-block-size-2"> 
    {{ designSystemComponent(item.previewUrl, item.markup, item.rendered, item.handle) }}  
  </div>

  {% if item.docs %}
  <article class="flow">
    <h2>Information</h2>
    {{ item.docs | md | safe }}
    {% if item.data.keyLinks | length %}
      <h3>Key links</h3>
      <ul>
        {% for link in item.data.keyLinks %}
        <li>
          <a href="{{ link.url }}">{{ link.label }}</a>
        </li>
        {% endfor %}
      </ul>
    {% endif %}
  </article>
  {% endif %}

  {% if item.variants | length %}
    <h2>Variants</h2>
    {% for variant in item.variants %}
    <h3 id="{{ variant.data.title | slug }}">{{ variant.data.title }}</h3>
    <div class="breakout gap-top-size-1">
      {{ designSystemComponent(variant.previewUrl, variant.markup, variant.rendered, variant.handle) }} 
    </div>
    {% endfor %}
  {% endif %}
{% endblock %}

